// https://f2.antv.vision/zh/examples/bar/stack#percent

import F2 from '@antv/f2';
import _ from 'lodash';

const data = [
  {
    country: 'Europe',
    year: '1750',
    value: 163,
    percent: 0.24511278195488723,
  },
  {
    country: 'Asia',
    year: '1750',
    value: 502,
    percent: 0.7548872180451128,
  },
  {
    country: 'Europe',
    year: '1800',
    value: 203,
    percent: 0.24224343675417662,
  },
  {
    country: 'Asia',
    year: '1800',
    value: 635,
    percent: 0.7577565632458234,
  },
  {
    country: 'Europe',
    year: '1850',
    value: 276,
    percent: 0.2543778801843318,
  },
  {
    country: 'Asia',
    year: '1850',
    value: 809,
    percent: 0.7456221198156682,
  },
  {
    country: 'Europe',
    year: '1900',
    value: 408,
    percent: 0.3011070110701107,
  },
  {
    country: 'Asia',
    year: '1900',
    value: 947,
    percent: 0.6988929889298893,
  },
  {
    country: 'Europe',
    year: '1950',
    value: 547,
    percent: 0.2806567470497691,
  },
  {
    country: 'Asia',
    year: '1950',
    value: 1402,
    percent: 0.7193432529502309,
  },
  {
    country: 'Europe',
    year: '1999',
    value: 729,
    percent: 0.16708686683474674,
  },
  {
    country: 'Asia',
    year: '1999',
    value: 3634,
    percent: 0.8329131331652533,
  },
  {
    country: 'Europe',
    year: '2050',
    value: 628,
    percent: 0.10651289009497965,
  },
  {
    country: 'Asia',
    year: '2050',
    value: 5268,
    percent: 0.8934871099050203,
  },
  {
    country: 'Europe',
    year: '2100',
    value: 828,
    percent: 0.10227272727272728,
  },
  {
    country: 'Asia',
    year: '2100',
    value: 7268,
    percent: 0.8977272727272727,
  },
];
const chart = new F2.Chart<typeof data[0]>({
  id: 'container',
  pixelRatio: window.devicePixelRatio,
});
chart.source(data, {
  percent: {
    min: 0,
    formatter: function formatter(val) {
      return (val * 100).toFixed(0) + '%';
    },
  },
});
chart.coord({
  transposed: true,
});
chart.tooltip({
  custom: true, // 自定义 tooltip 内容框
  onChange: function onChange(obj) {
    const legend = chart.get('legendController').legends.top![0];
    const tooltipItems = obj.items;
    const legendItems = legend.items;
    const map: Record<string, F2.LegendItem> = {};
    legendItems.forEach(function (item) {
      map[item.name] = _.clone(item);
    });
    tooltipItems.forEach(function (item) {
      const name = item.name!;
      const value = item.value;
      if (map[name]) {
        map[name].value = value;
      }
    });
    legend.setItems(_.values(map));
  },
  onHide: function onHide() {
    const legend = chart.get('legendController').legends.top![0];
    legend.setItems(chart.getLegendItems().country!);
  },
});
chart.interval().position(['year', 'percent']).color('country').adjust('stack');
chart.render();
